<template>
  <div class="category">
    <div class="category-wrapper" ref="categoryWrapper" :style="{height: scrollHeight + 'px'}">
      <ul class="category-list">
        <li class="category-item" v-for="(item, index) in categoryData" :key="index"
            :class="{select: currentCategoryIndex === index}" @click="handleItemClick(index, item.brand_category_id)">
          <div class="category-item-img-box">
            <img class="item-image" :src="item.cover" alt="">
          </div>
          <div class="item-title">{{ item.title }}</div>
        </li>
      </ul>
    </div>
    <div class="product-wrapper" ref="productWrapper" :style="{height: scrollHeight + 'px'}">
      <ul class="product-list">
        <li class="product-item" v-for="(productItem, productIndex) in productData" :key="productIndex"
            @click="handleProductItemClick(productItem)">
          <img class="product-item-cover" :src="productItem.cover" alt="">
          <div class="product-item-title">{{ productItem.title }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'Category',
  props: {
    categoryList: Array,
    productList: Array,
    currentCategoryIndex: Number,
    scrollHeight: Number
  },
  data () {
    return {
      categoryScroll: null,
      productScroll: null
    }
  },
  computed: {
    categoryData () {
      return this.categoryList
    },
    productData () {
      return this.productList
    }
  },
  watch: {
    categoryData () {
      this.$nextTick(() => {
        this._initCategoryScroll()
      })
    },
    productData () {
      setTimeout(() => {
        this._initProductScroll()
      }, 300)
    }
  },
  methods: {
    handleItemClick (index, id) {
      this.$emit('itemClick', {
        index,
        id
      })
    },
    handleProductItemClick (item) {
      this.$emit('productItemClick', item)
    },
    _initCategoryScroll () {
      this.categoryScroll = new BScroll(this.$refs.categoryWrapper, {
        click: true,
        tap: true
      })
    },
    _initProductScroll () {
      this.productScroll = new BScroll(this.$refs.productWrapper, {
        click: true,
        tap: true
      })
    }
  }
}
</script>

<style scoped>
.category {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.category-wrapper {
  width: 25%;
  overflow: hidden;
  background-color: #f1f1f1;
}
.category-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}

.category-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  color: #999;
}
.category-item-img-box{
  width: 80%;
  position: relative;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding-bottom: 80%;
}

.select {
  background-color: #fff;
  color: #000;
}

.item-image {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

.item-title {
  margin-top: 10px;
}

.product-wrapper {
  width: 70%;
  overflow: hidden;
}

.product-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 30px;
}

.product-item {
  width: 40%;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-item-cover {
  width: 100%;
}
</style>
